<template>
	<div ref="userCardTippy" :name="'userCardInfoTrigger' + message.messageId" class="user-card-content-container">
		<div class="portrait-name-container">
			<img :src="message.messageContent.portrait" />
			<p>{{ message.messageContent.displayName }}</p>
		</div>
		<p class="desc single-line">个人名片</p>
		<tippy
			:to="'userCardInfoTrigger' + message.messageId"
			interactive
			:animate-fill="false"
			placement="left"
			distant="7"
			theme="light"
			animation="fade"
			trigger="click"
		>
			<UserCardView v-on:close="closeUserCard" :user-info="userInfo()" />
		</tippy>
	</div>
</template>

<script>
	import Message from '@/wfc/messages/message'
	import UserCardView from '@/pages/user/UserCardView'
	import wfc from '@/wfc/client/wfc'

	export default {
		name: 'UserCardMessageContentView',
		props: {
			message: {
				required: true,
				type: Message
			}
		},
		components: {
			UserCardView
		},

		methods: {
			closeUserCard() {
				console.log('closeUserCard')
				this.$refs['userCardTippy']._tippy.hide()
			},
			userInfo() {
				let userCard = this.message.messageContent
				if (userCard.cardType === 0) {
					return wfc.getUserInfo(userCard.target)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.user-card-content-container {
		width: 230px;
		height: 100px;
		margin: 0 10px;
		padding: 10px;
		background-color: white;
		position: relative;
		border-radius: 5px;
	}

	.portrait-name-container {
		display: flex;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #eeeeee;
	}

	.portrait-name-container img {
		width: 45px;
		height: 45px;
		border-radius: 3px;
	}

	.portrait-name-container p {
		padding-left: 10px;
		padding-right: 10px;
	}

	.desc {
		padding-top: 8px;
		font-size: 13px;
		color: #b8b8b8;
	}
</style>
